<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信-父子组件通信案例</title>
</head>
<script src="../js/vue.js"></script>
<body>

<div id="app">
    <cpn :number1="num1" :number2="num2" @num1change="number1change"
         @num2change="number2change">
    </cpn>
</div>

</body>

<template id="cpn">
    <div>
        <h2>number1:{{number1}}</h2>
        <h2>dnumber1:{{dnumber1}}</h2>
        <input type="text" :value="dnumber1" @input="input1">
        <h2>number2:{{number2}}</h2>
        <h2>dnumber2:{{dnumber2}}</h2>
        <input type="text" :value="dnumber2" @input="input2">
    </div>
</template>

<script>
    const vue = new Vue({
        'el': '#app',
        'data': {
            num1: 1,
            num2: 2,
        },
        'methods': {
            number1change(val) {
                this.num1 = parseInt(val)
            },
            number2change(val) {
                this.num2 = parseInt(val)
            }
        },
        components: {
            cpn: {
                template: '#cpn',
                props: {
                    number1: {
                        required: true,
                        type: Number
                    },
                    number2: {
                        required: true,
                        type: Number
                    },
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2,
                    }
                },
                methods: {
                    input1(event) {
                        this.dnumber1 = event.target.value;
                        this.$emit('num1change', this.dnumber1);
                    },
                    input2(event) {
                        this.dnumber2 = event.target.value;
                        this.$emit('num2change', this.dnumber2);
                    }
                }
            }
        }
    })
</script>
</html>